<template>
	<view class="container">
	  <view class="tabnav">
	    <view @click="scrollToFlag" :class="navFlag==1?'cur':''" data-index="1" data-class="pbpos">商品</view>
	    <view @click="scrollToFlag" :class="navFlag==2?'cur':''" data-index="2" data-class="pintro">详情</view>
	    <view @click="scrollToFlag" :class="navFlag==3?'cur':''" data-index="3" data-class="pmessage">评价</view>
	  </view>
	  <scroll-view :scroll-into-view="id" scroll-y='true' scroll-with-animation='true' style="height:100vh">
	    <swiper style="height:500rpx" indicator-dots="true" autoplay="true" interval="4000" duration="600" id="pbpos">
	      <swiper-item>
	        <view class="swiper-item">
	          <image src="/static/bp1.jpg" mode="widthFix" />
	        </view>
	      </swiper-item>
	      <swiper-item>
	        <view class="swiper-item">
	          <image src="/static/bp2.jpg" mode="widthFix" />
	        </view>
	      </swiper-item>
	      <swiper-item>
	        <view class="swiper-item">
	          <image src="/static/bp3.jpg" mode="widthFix" />
	        </view>
	      </swiper-item>
	      <swiper-item>
	        <view class="swiper-item">
	          <image src="/static/bp4.jpg" mode="widthFix" />
	        </view>
	      </swiper-item>
	      <swiper-item>
	        <view class="swiper-item">
	          <image src="/static/bp5.jpg" mode="widthFix" />
	        </view>
	      </swiper-item>
	    </swiper>
	
	  <view class="pbinfo">
	    <view class="pprice">￥453,890</view>
	    <view class="pname">东风日产 第七代天籁 2020款2.0T XV AD1智尊领航版</view>
	    <view class="select">
	      <text class="slabel">已选：</text>
	      <text class="scontent">天际红-手动</text>
	      <text class="smore">…</text>
	    </view>
	  </view>
	
	  <view class="pconitem" id="pintro">
	    <view class="ptitle">商品详情</view>
	    <view class="pcontent">
	      <image src="/static/pintro.jpg" style="width:100%" mode="widthFix" />
	    </view>
	  </view>
	
	  <view class="pconitem" id="pmessage">
	    <view class="ptitle">评价</view>
	    <view class="pmlist">
	      <view class="pmlist-item">
	        <view class="pm-top">
	          <image src="/static/cur_user.png" />
	          <text>李欣雨</text>
	          <text>2020-01-14</text>
	        </view>
	        <view class="pm-content">
	          信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊
	        </view>
	      </view>
	      <view class="pmlist-item">
	        <view class="pm-top">
	          <image src="/static/cur_user.png" />
	          <text>李欣雨</text>
	          <text>2020-01-14</text>
	        </view>
	        <view class="pm-content">
	          信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊
	        </view>
	      </view>
	      <view class="pmlist-item">
	        <view class="pm-top">
	          <image src="/static/cur_user.png" />
	          <text>李欣雨</text>
	          <text>2020-01-14</text>
	        </view>
	        <view class="pm-content">
	          信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊信夺砖石地热活动泊
	        </view>
	      </view>
	    </view>
	  </view>
	</scroll-view>
	  <view class="pfooter">
	    <view class="pfooter-left">
	      <view class="plopt">
	        <image src="/static/collection.png" />
	        <text>收藏</text>
	      </view>
	      <view class="plopt">
	        <image src="/static/cart-Empty.png" />
	        <text class="boil">12</text>
	        <text>购物车</text>
	      </view>
	    </view>
	
	    <view class="pfooter-right">
	    <view class="addcart">加入购物车</view>
	    <view class="addorder">预约看车</view>
	    </view>
	  </view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pbaseinfopos:0,
				    pintropos:0,
				    pmesspos:0,
				    navHeight:0,
				    navFlag:1,
				    id:''
			}
		},
		methods: {
			scrollToFlag(event){
				console.log(event)
				this.navFlag=event.currentTarget.dataset.index,
				this.id=event.currentTarget.dataset.class
			}
		}
	}
</script>

<style>
/* pages/product/product.wxss */
.container{
  padding:1px 0 0 0;
  margin: 0;
  background: #F8F8FF;
  padding-bottom:96rpx;
  padding-top: 96rpx;
}
.tabnav{
  display: flex;
  flex-direction: row;
  position: fixed;
  left: 0;
  top:96rpx;
  width:100%;
  height: 96rpx;
  z-index: 100;
  background-color: #F8F8FF;
}
.tabnav view{
  line-height: 80rpx;
  width:calc(100%/3);
  text-align: center;
  font-size: 32rpx;
  border-bottom:1px solid #ccc;
}
.tabnav .cur{
  border-bottom:2px solid #d81e06;
  color:#d81e06;
}
.swiper-item{
  width:100%;
}
.swiper-item image{
  width:100%;
}
.pbinfo{
  padding:24rpx;
  background-color: #fff;
}
.pbinfo .pprice{
  color:#d81e06;
  font-size: 40rpx;
  font-weight: bold;
  line-height: 64rpx;
}
.pbinfo .pname{
  padding:32rpx 0;
  font-size: 32rpx;
  font-weight: bold;
}
.select{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  line-height: 64rpx;
  font-size: 28rpx;
  padding-bottom:24rpx;
  
}
.slabel{
  color:#666;
}
.scontent{
  flex: 1;
}
.smore{
  font-size: 40rpx;
  font-weight: bold;
  line-height: 64rpx;
  padding:0 16rpx;
  color:#666;
}

.pconitem{
  padding:32rpx;
  background-color: #fff;
  margin-top: 16rpx;
}
.ptitle{
  line-height: 64rpx;
  font-size: 32rpx;
  border-bottom:1px solid #ccc;
  margin-bottom: 32rpx;
}
.pmlist{
  display: flex;
  flex-direction: column;
}
.pm-top{
  display: flex;
  flex-direction: row;
  font-size: 24rpx;
  line-height: 64rpx;
  margin-bottom: 32rpx;
}
.pm-top image{
  width:64rpx;
  height: 64rpx;
  margin-right: 16rpx;
}
.pm-top text:last-child{
  flex: 1;
  text-align: right;
  color:#666;
}
.pm-content{
  font-size: 24rpx;
  line-height: 48rpx;
  margin-bottom: 32rpx;
  padding-bottom:32rpx;
  border-bottom:1px dotted #ccc;
  color:#666;
  text-indent: 2em;
}

.pfooter{
  position: fixed;
  left: 0;
  bottom: 0;
  width:100%;
  height: 96rpx;
  border-top:1px solid #ccc;
  background-color: #fff;
  display: flex;
  flex-direction: row;
}
.pfooter-left{
  width:40%;
  display: flex;
  flex-flow: row;

}
.plopt{
  width:50%;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  text-align:center;
  font-size: 22rpx;
  color:#666;
  position: relative;
}
.plopt image{
  width:48rpx;
  height: 48rpx;
}
.boil{
  position: absolute;
  left:50%;
  top:2rpx;
  background-color: #d81e06;
  color:#fff;
  width:32rpx;
  height: 32rpx;
  text-align: center;
  line-height: 32rpx;
  font-size: 16rpx;
  border-radius: 32rpx;
}
.pfooter-right{
  width:60%;
  display: flex;
  flex-direction: row;
}
.pfooter-right view{
  width:50%;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 28rpx;
  text-align: center;
  font-weight: 600;
  color:#fff;
}
.addcart{
  background-color:#d81e06;
}
.addorder{
  background-color: #eb8a00;
}




</style>
